import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import {Carousel} from 'antd';
import SecondStore from '../../../store/secondStore'
import {IOrderListType} from "../../../type/firstType";

interface IProps {
    orderList: IOrderListType[]
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }

    public componentDidMount() {
        const one = document.getElementById('one')
        const two = document.getElementById('two')
        const three = document.getElementById('three')
        if (one && two && three) {
            SecondStore.one = one.offsetWidth
            SecondStore.two = two.offsetWidth
            SecondStore.three = three.offsetWidth
        }
    }


    public render() {
        const {one, two, three} = SecondStore
        const {orderList} = this.props
        return (
            <div className={styles.swiper}>
                <div className={styles.title}>
                    <div id='one'>WorkOrderNumber</div>
                    <div className={styles.title1}>Location</div>
                    <div id='two'>PurposeofVisit</div>
                    <div id='three'>InitialReportEnglish</div>
                </div>
                <div className={styles.swiperC}>
                    {
                        orderList.length > 0 &&
                        <Carousel autoplay={true} dots={false} vertical={true} slidesToShow={3} autoplaySpeed={1000}>
                            {
                                orderList.map((item, index) => {
                                    return (
                                        <div className={styles.list1} key={`itemLOS_${index}`}>
                                            <div className={styles.listItem}
                                                 style={{width: `${one}px`}}>{item.WorkOrderNumber}</div>
                                            <div className={styles.listItem1}>{item.Location}</div>
                                            <div className={styles.listItem}
                                                 style={{width: `${two}px`}}>{item.PurposeofVisit}</div>
                                            <div className={styles.listItem}
                                                 style={{width: `${three}px`}}>{item.InitialReportEnglish}</div>
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
